<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 300px;
            height: 309px;
            border: 1px solid #000;
            margin: 0 auto;
        }
        button{
            background-color: #000;
            color: #fff;
            width: 60px;
            height: 40px;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
        }
        .top{
            text-align: right;
            background-color: #808080;
        }
        .top p{
            margin-right: 5px ;
            font-size: 12px;
            /* width: 10px; */
            height: 10px;
        }
        .top h2{
            margin-right: 5px ;
        }
        .bottom{
            background-color: #A0A0A0;
            height: 268px;
            position: relative;
        }
        .C{
            position: absolute;
            top: 10px;
            left: 13px;
        }
        .percentage{
            position: absolute;
            top: 10px;
            left: 82px;
        }
        .÷{
            position: absolute;
            top: 10px;
            left: 153px;
        }
        .×{
            position: absolute;
            top: 10px;
            left: 226px;
        }
        .num7{
            position: absolute;
            top: 60px;
            left: 13px;

        }
        .num8{
            position: absolute;
            top: 60px;
            left: 82px;
        }
        .num9{
            position: absolute;
            top: 60px;
            left: 153px;
        }

        .reduce{
            position: absolute;
            top: 60px;
            left: 226px;
        }
        .num4{
            position: absolute;
            top: 110px;
            left: 13px;
        }
        .num5{
            position: absolute;
            top: 110px;
            left: 82px;
        }
        .num6{
            position: absolute;
            top: 110px;
            left: 153px;
        }
        .plus{
            position: absolute;
            top: 110px;
            left: 226px;
        }
        .num1{
            position: absolute;
            top: 160px;
            left: 13px;
        }
        .num2{
            position: absolute;
            top: 160px;
            left: 82px;
        }
        .num3{
            position: absolute;
            top: 160px;
            left: 153px;
        }
        .equal{
            position: absolute;
            top: 160px;
            left: 226px;   
            height: 90px;         
        }
        .num0{
            position: absolute;
            top: 210px;
            left: 13px;
            width: 129px;            
        }
        .spot{
            position: absolute;
            top: 210px;
            left: 153px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="top">
            <p></p>
            <h2>0</h2>
        </div>
        <div class="bottom">
            <button class="C">C</button>
            <button class="percentage">%</button>
            <button class="÷">÷</button>
            <button class="×">×</button>
            <button class="num7">7</button>
            <button class="num8">8</button>
            <button class="num9">9</button>
            <button class="reduce">-</button>
            <button class="num4">4</button>
            <button class="num5">5</button>
            <button class="num6">6</button>
            <button class="plus">+</button>
            <button class="num1">1</button>
            <button class="num2">2</button>
            <button class="num3">3</button>
            <button class="equal">=</button>
            <button class="num0">0</button>
            <button class="spot">.</button>
        </div>
    </div>

    <script>
        window.onload = function(){
            var num1 = document.getElementsByClassName('num1')
            var num2 = document.getElementsByClassName('num2')
            var plus = document.getElementsByClassName('plus')
            var equal = document.getElementsByClassName('equal')

            equal.onclick = function(){
                
            }
        }
    </script>
</body>
</html>